<template>
	<view class="container">
    <view class="account-info-box">
        <view class="avatar-box" @tap="goEditAvatar">
           <image class="avatar-img" :src="userInfo.avatar || './static/avatar.png'"></image>
           <image class="photo-img" src="./static/photo.png"></image>
        </view>
        <view  class="username" @tap="goEditNickname">{{userInfo.nickname}}<image class="edit-img" src="./static/edit.png"></image></view>
        <view class="vip-txt">普通会员</view>
    </view>
    <view class="list">
      <view class="multi-item">
        <view class="multi-item-child" @tap="goAuth">
           身份认证
           <view class="content">
             <text class="auth-txt">{{userInfo.car_contact.value}}</text>
             <view class="iconfont icon-jiantou _font-10" style="color: #bdbdbd;"></view>
           </view>
        </view>
        <view class="multi-item-child" @tap="goEditPhone">
           手机号
           <view class="content">
             <text class="phone">{{userInfo.phone}}</text>
             <view class="iconfont icon-jiantou _font-10" style="color: #bdbdbd;"></view>
           </view>
        </view>
      </view>
      <navigator class="item"  url="/pages/info_setting/privacy_policy">
          隐私政策
          <view class="content">
            <view class="iconfont icon-jiantou _font-10" style="color: #bdbdbd;"></view>
          </view>
      </navigator>
      <navigator class="item"  url="/pages/info_setting/common_info">
          常用信息
          <view class="content">
            <view class="iconfont icon-jiantou _font-10" style="color: #bdbdbd;"></view>
          </view>
      </navigator>
    </view>
    <!-- #ifdef H5 || APP-PLUS || MP -->
    <view class="operate-box"  @tap="outLogin">退出登录</view>
    <!-- #endif -->
	</view>
</template>

<script>
 import { getUserInfo } from '@/api/user.js';
 import {
 	getLogout,
 } from '@/api/user.js';
 
  
	export default {
		data() {
			return {
        userInfo:  {},// 用户信息
        loginType: 'h5', //app.globalData.loginType
			}
		},
    onLoad(options) {
    
    },
    onShow() {
    	this.getUserInfo()
    },
    methods: {
     // 获取用户信息
     getUserInfo() {
     	getUserInfo().then((res)=>{
     		this.userInfo = res.data;
     	}).catch((err)=>{
     		uni.showToast({
     			title:'用户信息获取失败',
     			icon:'none'
     		})
     	})
     },
      goAuth(){
        let contact_id = this.userInfo.car_contact.contact_id;
        let company_contact_id = this.userInfo.company_contact.contact_id;
        let url = `/pages/info_setting/person_auth?contact_id=${contact_id}&company_contact_id=${company_contact_id}` // 个人认证
        uni.navigateTo({
          url,
        })
      },
      goEditPhone(){
        uni.navigateTo({
          // url: `/pages/users/user_phone/index?type=1`
          url: `/pages/info_setting/edit_phone`
        })
      },
      goEditAvatar(){
        uni.navigateTo({
          url: `/pages/info_setting/edit_avatar?uid=${this.userInfo.uid}`
        })
      },
      goEditNickname(){
        uni.navigateTo({
          url: `/pages/info_setting/edit_nickname?uid=${this.userInfo.uid}&nickname=${this.userInfo.nickname}`
        })
      },
      /**
       * 退出登录
       * 
       */
      outLogin: function() {
      	let that = this;
      	if (that.loginType == 'h5') {
      		uni.showModal({
      			title: that.$t(`提示`),
      			content: that.$t(`确认退出登录`),
      			success: function(res) {
      				if (res.confirm) {
      					getLogout()
      						.then(res => {
      							// uni.clearStorage()
      							that.$store.commit("LOGOUT");
      							uni.reLaunch({
      								url: '/pages/car_index/index'
      							})
      						})
      						.catch(err => {});
      				} else if (res.cancel) {}
      			}
      		});
      	}
      },
    }
	}
</script>

<style lang="scss" scoped>
	page {
    min-height: 100vh;
		background-color: rgb(248,249,252);
	}

	.container {
		padding: 32rpx;
	}
  .account-info-box{
    text-align: center;
    margin: 30rpx auto 60rpx;
    .avatar-box{
      position: relative;
      width: 192rpx;
      height: 192rpx;
      margin: 0 auto;
      .avatar-img{
        width: 192rpx;
        height: 192rpx;
        border-radius: 192rpx;
      }
      .photo-img{
        width: 64rpx;
        height: 64rpx;
        position: absolute;
        right: 0;
        bottom: 0;
      }
    }
    .username{
      margin-top: 40rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 500;
      font-size: 48rpx;
      color: #000000;
      .edit-img{
        margin-left: 8rpx;
        width: 36rpx;
        height: 36rpx;
      }
    }
    .vip-txt{
      display: inline-flex;
      margin-top: 40rpx;
      padding: 8rpx 16rpx;
      background: #D9E1FF;
      border-radius: 100rpx;
      font-size: 24rpx;
      color: #008DFF;
    }
  }
  .list{
    
  }
  .item{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #FFF;
    font-size: 28rpx;
    color: rgba(0,0,0,0.9);
    padding: 32rpx 28rpx;
    border-radius: 10rpx;
    margin-bottom: 24rpx;
  }
  .multi-item{
    width: 686rpx;
    padding: 32rpx 28rpx;
    margin-bottom: 24rpx;
    box-sizing: border-box;
    background: #FFFFFF;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    .multi-item-child{
      display: flex;
      align-items: center;
      justify-content: space-between;
      &:nth-child(1){
        padding-bottom: 24rpx;
      }
      &:nth-child(2){
        padding-top: 24rpx;
      }
      .content{
        display: flex;
        align-items: center;
        .auth-txt{
          margin-right: 10rpx;
          font-size: 28rpx;
          color: #FF5700;
        }
        .phone{
          margin-right: 10rpx;
          font-size: 28rpx;
          color: rgba(0,0,0,0.4);
        }
      }
    }
  }
  .operate-box{
    width: 686rpx;
    height: 96rpx;
    line-height: 96rpx;
    margin: 100rpx auto 30rpx;
    box-sizing: border-box;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    font-weight: 600;
    font-size: 32rpx;
    color: #FFFFFF;
    background: #008DFF;
    text-align: center;
    border-radius: 12rpx;
  }
</style>
